<template>
    <app-dialog v-model="show" width="800px" title="偏好设置" @open="handleOpen" :loading="store.state.loading">
        <div class="preference_index">
            <Header />
            <List v-if="store.state.formData.base" />
        </div>

        <template #footer>
            <app-button @click="handleClose">恢复默认</app-button>
            <el-popover placement="top" :width="310" trigger="click">
                <template #reference>
                    <app-button class="app-button-ptn" style="margin-left: 8px;">保存模板</app-button>
                </template>

                <div class="submit_popover">
                    <div class="title">
                        <img src="@/assets/home/waring.png" style="width:16px;height: 16px;margin-right: 8px;" alt="">
                        <div>保存后，后续手动创建、批量导入创建环境时的环境参数均以当前环境模板参数进行创建</div>
                    </div>
                    <div class="buttons">
                        <!-- <app-button>取消</app-button> -->
                        <app-button class="app-button-ptn" @click="handleSubmit">我知道了</app-button>
                    </div>
                </div>

            </el-popover>
        </template>
    </app-dialog>
</template>

<script setup>
import { preferenceStore } from './store.js'
import Header from "./components/Header.vue";
import List from "./components/List.vue";
import { http } from '@/utils/http'
import { ElMessage } from 'element-plus'
const show = defineModel({ type: Boolean })
const emits = defineEmits(['change'])
const store = preferenceStore()
provide('preference_store', {
    store,
    state: store.state
})
const handleOpen = () => {



}

const handleSubmit = () => {
    http.put('/environment/update_environment_model', store.state.formData).then((res) => {
        show.value = false
        ElMessage({
            message: '保存成功',
            type: 'success',
        })
    })

}

const handleClose = () => {
    store.state.formData = JSON.parse(JSON.stringify(store.state.formData_copy))
}

onMounted(() => {

})
</script>

<style lang="scss" scoped>
.preference_index {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px 4px 16px 32px;
}

.submit_popover {
    display: flex;
    flex-direction: column;

    .title {
        display: flex;
        margin-bottom: 16px;
    }

    .buttons {
        display: flex;
        justify-content: flex-end;
    }
}
</style>